<template>
  <div>
    <el-drawer title="订单详情" :visible.sync="dialog" direction="rtl" ref="drawer" size="45%" :destroy-on-close="true"
      :before-close="close" :wrapperClosable="false">
      <el-form ref="createUserForm" :model="formData" size="small" label-width="110px">
        <br />
        <el-form-item label="订单号">
          <el-input v-model="formData.orderId" disabled clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="formData.orderProductName" disabled clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="商品编号">
          <el-input v-model="formData.orderProductNo" disabled clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="单价">
          <el-input v-model="formData.orderProductPrice" disabled clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="formData.productNum" disabled clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="付款总价">
          <el-input v-model="formData.payment" disabled clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-input v-model="formData.createTime" disabled clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="用户">
          <el-input v-model="formData.mallUser.nickname" disabled clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="付款时间">
          <el-input v-model="formData.payTime" disabled clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
      </el-form>
      <div class="el-drawer-footer">
        <el-button size="small" @click="dialog = false">取 消</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import {
    mallOrderInfo
  } from '@/api/mall.product.js'
  export default {
    data() {
      return {
        dialog: false,
        loading: false,
        formData: {
          orderId: undefined,
          orderProductName: undefined,
          orderProductNo: undefined,
          orderProductPrice: undefined,
          productNum: undefined,
          payment: undefined,
          createTime: undefined,
          payTime: undefined,
          mallUser:{
            nickname: undefined,
          }
        },
      }
    },
    mounted() {

    },
    methods: {
      close() {
        this.loading = false;
        this.dialog = false;
      },
      async open(orderId) {
        this.loading = false;
        this.dialog = true;
        this.formData.orderId = orderId
        var res = await mallOrderInfo(orderId);
        var data = res.data;
        for (let key in this.formData) {
          if (data.hasOwnProperty(key)) {
            this.formData[key] = data[key];
          }
        }
      },
    }
  }
</script>

<style>
  .el-drawer__header {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #72767b;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 15px;
    padding: 15px 20px 0;
  }

  .el-drawer__body {
    height: calc(100% - 55px) !important;
    overflow-y: auto;
    padding: 5px;
    border-top: #DDDDDD 1px solid;
    margin-bottom: 62px;
    border-bottom: #DDDDDD 1px solid;
  }

  .el-drawer-footer {
    width: 100%;
    text-align: right;
    padding: 15px 20px;
    background-color: white;
    position: absolute;
    bottom: 0;
  }

  .disabled .el-upload--picture-card {
    display: none;
  }

</style>
